<template>
    <div>
        <el-dialog
                id="customerDetail"
                title="跟进详情"
                :visible.sync="dialogshow"
                :before-close="dialogClose"
                style="display:none;"
                top="10vh"
                width="90%"
                :fullscreen="fullscreen"
        >
            <dialog-tools
                    v-bind:back="true"
                    v-bind:next="true"
                    v-bind:goback="true"
                    v-bind:prev="true"
                    v-bind:screen="true"
                    @clickfullscreen="clickfullscreen"
            >
            </dialog-tools>
            <el-tabs class="tabs-table customer-tabs" type="border-card" v-model="activeName">
                <el-tab-pane label="跟进信息" name="first">
                    <table style="width:100%;">
                        <tr>
                            <td style="width:25%">
                                <div class="td-lable">客户名称:</div>
                                <div class="td-info"> 某某公司</div>
                            </td>
                            <td style="width:25%">
                                <div class="td-lable">客户代码:</div>
                                <div class="td-info"> ZBD</div>
                            </td>
                            <td style="width:25%">
                                <div class="td-lable">客户状态:</div>
                                <div class="td-info"> 合作中</div>
                            </td>
                            <td style="width:25%">
                                <div class="td-lable">客户类别:</div>
                                <div class="td-info"> A类</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="td-lable">业务联系人1:</div>
                                <div class="td-info">吴先生</div>
                            </td>
                            <td>
                                <div class="td-lable">联系电话:</div>
                                <div class="td-info">13355888888<br>13355888888</div>
                            </td>
                            <td>
                                <div class="td-lable">微信:</div>
                                <div class="td-info">fasdD342</div>
                            </td>
                            <td>
                                <div class="td-lable">邮箱:</div>
                                <div class="td-info">88888@qq.com</div>
                            </td>
                        </tr>
                      
                        <tr>
                            <td>
                                <div class="td-lable">跟进类型:</div>
                                <div class="td-info"> 业务拓展</div>
                            </td>
                            <td>
                                <div class="td-lable">跟进方式:</div>
                                <div class="td-info">微信</div>
                            </td>
                            <td>
                                <div class="td-lable">跟进时间:</div>
                                <div class="td-info">2020-08-08 20:10:10</div>
                            </td>
                            <td>
                                <div class="td-lable">跟进人:</div>
                                <div class="td-info">客服1</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="td-lable">下次跟进:</div>
                                <div class="td-info">2020-08-08</div>
                            </td>
                            <td>
                                <div class="td-lable">剩余时间:</div>
                                <div class="td-info">1天</div>
                            </td>
                            <td colspan="2">
                                <div class="td-lable">提醒方式:</div>
                                <div class="td-info">系统默认</div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4">
                                <div class="td-lable">跟进详情:</div>
                                <div class="td-info">一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字一大堆文字</div>
                            </td>
                        </tr>

                    </table>
                </el-tab-pane>
                <el-tab-pane label="跟进记录（5）" name="third">
                    <genjin-jilu></genjin-jilu>
                </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <el-dropdown style="float:left;margin-left: 15px" >
                    <el-button>
                        关联数据<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>设计图</el-dropdown-item>
                        <el-dropdown-item>客来石</el-dropdown-item>
                        <el-dropdown-item>客来金</el-dropdown-item>
                        <el-dropdown-item>其它...</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button type="primary" @click="dialogCustomerInfo = false;handleButtons(10)">继续跟进</el-button>
                <el-button @click="dialogClose">取 消</el-button>
                <el-button type="primary" @click="dialogClose">确定</el-button>
            </div>
        </el-dialog>

        <genjin-add
                v-bind:dialogshow="dialogGenjiAdd"
                @dialog_close="dialog_close_genjin_add"
        ></genjin-add>
    </div>
</template>

<style scoped>
    #customerDialog .el-form-item {
        width: 45%;
        float: left;
        margin-bottom: 5px;
    }

    #customerDialog .el-form-item:nth-child(odd) {
        float: right;
    }

    .el-dialog__body,.el-form{
        overflow: hidden;
    }

    #customerDetail .el-form{
        border: 1px solid #c5c5c5;
        padding: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    /*#customerDialog .el-dialog__footer {*/
    /*    width: 45%;*/
    /*    clear: both;*/
    /*}*/


    .td-lable,
    .td-info {
        display: inline-table;
        vertical-align: -webkit-baseline-middle;
    }

    .td-lable {
        text-align: right;
        width: 100px;
    }

    .td-info {
        margin-left: 20px;
    }

    ul {
        list-style-type: none;
    }

    ul span {
        display: inline-table;
        min-width: 200px;
    }

    .tabs-table td {
        height: 50px;
        border-bottom: 1px solid #dcdfe6;
    }
    .customer-tabs .el-tab-pane{
        height:400px;
        overflow: auto;
        padding:20px;
    }
</style>

<script>
  module.exports = {
    methods:{
      dialogAdd(){
        this.$confirm('是否继续操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      dialogClose(){
        this.$emit('dialog_close',1)
      },
      clickfullscreen () {
        this.fullscreen = !this.fullscreen
      },
      //跟进
      dialog_close_genjin_add (val) {
        console.log(val)
        this.dialogGenjiAdd = false
      },
      handleButtons (val) {
        console.log(2222)
        switch (val) {
          case 1:
            this.dialogSendMessage = 'true'
            console.log(this.dialogSendMessage)
            break

          case 10:
            console.log(333)
            this.dialogCustomerInfo = 'false'
            this.dialogGenjiAdd = 'true'
            console.log(this.dialogGenjiAdd)
            break

        }
      },

    },
    props: ['dialogshow'],
    data (){
      return {
        activeName:'first',
        dialogSendMessage:false,
        dialogCustomerInfo:false,
        dialogGenjiAdd:false,
        // dialogshow:false,
        Sendmssages:{
          address:'',
          customercate:'',
          cate:'',
          nickname:'',
          creditrank:'',
          name:'',
        },
        customerstaffs:[
          { typename: '员工一' },
          { typename: '员工二' },
          { typename: '员工三' },
          { typename: '员工四' },
        ],
        changeReason:[
          { typename: '原因一' },
          { typename: '原因二' },
          { typename: '原因三' },
          { typename: '原因四' },
        ],
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        customer: {
          name: '',
          customercode: '',
          customerstatus: '',
          customercate: '',
          creditrank: '',
          creditline: '',
          capital: '',
          annualsales: '',
          bank: '',
          certificateno: '',
          address: '',
          area: '',
          brand: '',
          bankaccount: '',
          trademark: '',
          website: '',
          lperson: '',
          lphone: '',
          contacts: '',

          phone: '',
          phonenum: '',
          weixin: '',
          email: '',
          fax: '',
          resource: '',
          requirement: '',
          ordercountmonth: '',
          purchaseamountmonth: '',
          ordercountyear: '',
          purchaseamountyear: '',
          customerstaffname: '',
          customerstaffcode: '',
          operator: '',
          insertime: '',
          remark: '',
        },
        crmsclientStatic: [
          { typename: 'A级' },
          { typename: 'B级' },
          { typename: 'C级' },
          { typename: 'D级' },
        ],

        scheduleType: [
          { typename: '业务拓展' },
          { typename: '订单跟进' },
          { typename: '料/款跟进' },
        ],

        cates: [
          { typename: '意向客户' },
          { typename: '老客户' },
        ],

        crmsclientRank: [
          { typename: 'A类' },
          { typename: 'B类' },
          { typename: 'C类' },
          { typename: 'D类' },
        ],
        fullscreen: false,
      }
    },
    components:{
      'dialog-tools': 'url:../tools/dialog-tools.vue',
      'genjin-jilu': 'url:../data/genjin-jilu.vue',
      'genjin-add': 'url:./genjin-add.vue',
    }
  }
</script>
